@charset 'uft-8';
@import './px2rem.scss';

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    box-sizing: border-box;
    .center {
        width: p(590);
        // height: p(839);
        padding: p(60) p(50);
        box-sizing: border-box;
        background-color: rgba($color: #fff, $alpha: 0.5);
        border-radius: p(10);
        box-shadow: 0px 4px 13px 5px rgba(0, 0, 0, 0.3);
        .date-select {
            position: relative;
            .selected {
                font-size: p(30);
                position: relative;
                width: p(165);
                .arrow {
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translate(0, -25%) rotate(180deg);
                    border-color: rosybrown;
                    border-style: solid;
                    border-width: p(18) p(12);
                    border-bottom: none;
                    border-left-color: transparent;
                    border-right-color: transparent;
                }
                .active{
                    transform: translate(0, -25%) rotate(0);
                }
            }
            .date-list{
                width: p(140);
                background-color:#0074c1;
                position: absolute;
                z-index: 2;
                // height: 0;
                display: none;
                .date-items{
                    height: p(80);
                    line-height: p(80);
                    font-size: p(30);
                }
            }
        }

        .book-list {
            // width: p(350);
            .header {
                width: 100%;
                display: flex;
                height: p(100);
                line-height: p(100);
                margin-top: p(40);

                >div {
                    width: 50%;
                    font-size: p(26);
                    color: #0075c1;
                    text-align: center;
                }
            }

            .list {
                width: 100%;
                max-height: p(420);
                overflow-y: auto;
                .items {
                    width: 100%;
                    display: flex;
                    height: p(140);
                    line-height: p(140);
                    section {
                        font-size: p(26);
                        width: 50%;
                        text-align: center;
                    }
                }
                .loading{
                    width: 100%;
                    height: p(420);
                    background-image: url(../image/loading.gif);
                    background-repeat: no-repeat;
                    background-position: center;
                }
            }
            .attention{
                display: flex;
                margin-top: p(50);
                justify-content: center;
                font-size: p(26);
            }
        }
    }
    // display: none;
}
.comfirm-win,
.isBooked{
    position: absolute;
    width: 60%;
    top: 50%;
    left: 50%;
    z-index: 3;
    height: 20%;
    background-color: rgba(0, 255, 255, 0.671);
    transform: translate(-50%,-50%);
    text-align: center;
    border-radius: p(30);
    color: #fff;
    // display: none;
    margin-top: p(10);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    display: none;
    .comfirm-mes{
        display: flex;
        justify-content: space-around;
        >div{
            border: p(1) solid #000;
            font-size: p(40);
            box-sizing: border-box;
            padding: p(8) p(30);
            border-radius: p(15);
        }
    }
}
#mask{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background-color: rgba($color: #000, $alpha: .7);
    z-index: 2;
    display: none;
}